<template>
	<view>
		<!-- <BackTabBar title="注册账号" /> -->
		<view class="content">
			<view class="login_from">

				<view class="login_from_input">
					<view class="login_from_name">手机号</view>
					<view class="login_from_fun"><input v-model="newPhone" type="text" placeholder="请输入手机号码"></view>
				</view>

				<view class="login_from_input">
					<view class="login_from_name">验证码</view>
					<view class="login_from_fun">
						<input v-model="code" style="width: 40%; text-align: left" type="digit" maxlength="6"
							placeholder="验证码">
						<label class="regFrom_tom_yzlabel" :style="{ color : QzyzmStare?'#cccccc':'#d1100b'}"
							@click="Qzyzm">{{Qztime}}{{Qztext}}</label>
					</view>
				</view>
				<view class="login_from_dl">
					<button @click="denglu" style="font-weight: 600; background-color:#D1100B;">确 认</button>
				</view>

			</view>

		</view>
	</view>
</template>

<script>
	const reg = /^1[345789]\d{9}$/; // 手机号正则
	export default {
		components: {
			// BackTabBar
		},
		data() {
			return {
				phone: '',
				newPhone: '',
				code: '',
				gouxSta: true,
				Qztime: '',
				QzyzmStare: false,
				Qztext: '获取验证码',
				passwordShow: true,
			}
		},
		onLoad(query) {
			console.log(query);
			this.phone = query.phone
		},
		methods: {
			denglu() {
				if (!reg.test(this.newPhone) || !this.code) return uni.showToast({
					icon: 'none',
					title: '请检查信息是否填写正确'
				})
				this.$http("Base_Manage/Home/UserReplacePhone", {
					Phone: this.phone,
					SmsCode: this.code,
					NewPhone: this.newPhone
				}).then(res => {
					if (res.Success) {
						uni.showToast({
							icon: 'none',
							title: '手机号变更成功,请重新登录'
						})
						setTimeout(() => {
							this.logOut()
						}, 1000)
					} else {
						uni.showToast({
							icon: 'none',
							title: res.Msg
						})
					}
				})
			},
			logOut() {
				uni.removeStorageSync('loginStates');
				uni.removeStorageSync('userName');
				uni.removeStorageSync('password');
				uni.removeStorageSync('customerInfoSelect');
				uni.reLaunch({
					url: '/pages/index/index'
				})
			},
			async Qzyzm() {
				if (this.QzyzmStare == false) {
					if (!reg.test(this.newPhone)) return uni.showToast({
						icon: 'none',
						title: '请检查您的手机号是否输入正确'
					})
					var num = 60;
					this.$http('Base_Manage/Base_SMSConfig/GetTemplateCodeByCode?code=' + 'ZYT_VIPUser_ReplacePhone')
						.then(resData => {
							if (resData.Success) {
								this.$http("Base_Manage/Home/GetShortMessage?Phone=" + this.newPhone +
										"&TemplateCode=" + resData.Data)
									.then(res => {
										if (res.Success) {
											uni.showToast({
												icon: 'none',
												title: '短信发送成功'
											})
											this.Qztime = '60';
											this.Qztext = 's后获取';
											this.QzyzmStare = true;
											var interval = setInterval(() => {
												--this.Qztime
											}, 1000)
											setTimeout(() => {
												clearInterval(interval)
												this.Qztext = '获取验证码'
												this.Qztime = ''
												this.QzyzmStare = false
											}, 60000)
										} else {
											uni.showToast({
												icon: 'none',
												title: res.Msg
											})
										}
									})
							} else {
								uni.showToast({
									icon: 'none',
									title: resData.Msg
								})
							}
						})

				}
			},

		}
	}
</script>

<style>
	page {
		background: #fff;
	}

	.login_img {
		width: 100%;
		height: auto;
		margin-top: 90upx;
	}

	.login_img image {
		width: 170upx;
		height: 170upx;
		display: block;
		margin: 0px auto;
		border-radius: 50%;
	}

	.login_from {
		width: 100%;
		height: auto;
		box-sizing: border-box;
		padding: 20upx 8%;
	}

	.login_from_input {
		width: 100%;
		height: auto;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px #eee solid;
		padding: 40upx 0px;
		margin: 0px auto;
	}

	.login_from_name {
		width: 20%;
		font-size: 32rpx;
		font-weight: bold;
	}

	.login_from_fun {
		width: 80%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.login_from_fun input {
		width: 100%;
		text-align: left;
		font-size: 28rpx;
	}


	.login_from_dl {
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		margin-top: 150upx;
	}

	.login_from_dl button {
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		background: #66afff;
		color: #fff;
		border-radius: 50px;
	}

	.logo_text text {
		color: #d1100b;
	}

	.getyzm {
		width: 60%;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		color: #d1100b;
	}

	.regFrom_tom_yzlabel {
		width: 160rpx;
		text-align: right;
	}

	.regFrom_tom_yzlabel {
		width: 88px;
		text-align: center;
	}
</style>